<template>
	<view style="background: #FAFAFC;">
		<nav-bar-news></nav-bar-news>
		<!-- 搜索开始 -->
		<view style="margin-top:13px;padding: 0 16px;padding-bottom: 10px;">
			<view class="flex flex-row" style="height: 38px;background: #FFFFFF;position: relative;">
				<view class="inputlable"></view>
				<view class="inputcontent"><u--input placeholder="请输入标题的关键字" border="surround" v-model="queryList.newsname"></u--input></view>
				<view style="background: #FE7743;font-size: 10px;font-weight: 600;color: #FFFFFF;padding: 8px 13px;position: absolute;top: 3px;right: 4px;" @click="handleFilter">
					搜索
				</view>
			</view>
		</view>
		<!-- 搜索结束 -->

		<!-- 原始列表 包含分类 -->

		<!-- <view style="font-size: 13px;font-weight: 700;color: #000000;background-color: #FFFFFF;line-height: 32px;margin: 0 15px;padding-left: 10px;"> -->
		<!-- <view class="flex flex-row flex-wrap justify-start" style="margin: 11px auto;"> -->
		<!-- <view :class="queryList.zixunleixing ? 'activegay' : 'active'" @click="selectInfoType(0)" class="redianxinxi">全部信息</view>
				<view
					:class="queryList.zixunleixing === item.dictValue ? 'active' : 'activegay'"
					@click="selectInfoType(item.dictValue)"
					v-for="(item, index) in newsCategoryList"
					class="redianxinxi"
				>
					{{ item.dictLabel }}
				</view> -->

		<!-- </view> -->
		<view class="flex flex-row justify-evenly items-center" style="margin-top:25px;font-size: 12px;font-weight: 400;color: #000000;background-color: #FFFFFF;height:32px;">
			<view class="root"><ren-dropdown-filter :filterData="filterData" :defaultIndex="defaultIndex" @onSelected="onSelected"></ren-dropdown-filter></view>
		</view>
		<view class="flex justify-center items-center" style="margin-top:30px;padding-bottom:20px;font-size: 12px;font-weight: 500;color: #9C9C9C;">
			共有符合条件的园区
			<view style="color: #FE7743;">{{ total }}</view>
			家
		</view>
		<view style="padding: 0px 17px;">
			<view v-for="(item, index) in newsList" :key="index" class="flex flex-row" style="margin-bottom: 13px;" @click="goToNewDetailView(item.id)">
				<view style="width:134px;height:78px;"><image :src="item.pictureurl" style="width:134px;height:78px;"></image></view>
				<view style="background-color:#FFFFFF;margin-left:9px;overflow: hidden;" class="flex-1">
					<view style="height: 20px;font-size: 14px;font-weight: 600;color: #000000;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">
						{{ item.newsname }}
					</view>
					<view style="margin-top:8px;height: 28px;font-size: 10px;font-weight: 400;color: #000000;text-overflow:ellipsis;">
						<view v-html="setContent(item.content)"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 原始列表 包含分类 -->
	</view>
</template>

<script>
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue';
export default {
	data() {
		return {
			total: 0,
			newsCategoryList: [],
			queryList: {
				pageNum: 1,
				pageSize: 10,
				queryOption: 0,
				newsname: '',
				zixunleixing: ''
			},
			newsList: [],
			allNewsList: [],
			nlist: [],
			filterData: [
				[
					{ text: '资讯类型', zixunleixing: '' },
					{ text: '行业咨询', zixunleixing: 1 },
					{ text: '会议活动', zixunleixing: 2 },
					{ text: '园区动态', zixunleixing: 3 },
					{ text: '高端专访', zixunleixing: 4 },
					{ text: '政策解读', zixunleixing: 5 },
					{ text: '招商大学堂', zixunleixing: 6 },
					{ text: '聚园荟活动', zixunleixing: 7 }
				]
			],
			defaultIndex: [0]
		};
	},

	onLoad(option) {
		this.queryList.newsname = option.newsname;
		console.log(this.queryList.newsname);
		if (this.queryList.newsname) {
			this.getNewList();
		} else {
			this.namegetNewList();
		}
		// this.getNewsList();
		// this.getallNewsList();
		// this.getNewsCategoryList()
	},
	// components:{
	//             RenDropdownFilter
	//         },

	// onPullDownRefresh() {
	// 	if(this.queryList.newsname){
	// 	this.getNewList()
	// 	}else{
	// 		this.namegetNewList()
	// 	}
	// },
	onReachBottom() {
		// if(this.queryList.newsname){
		// this.getNewList()
		// }else{
		// 	this.namegetNewList()
		// }
		if (this.queryList.newsname) {
			console.log(this.queryList.pageNum);
			if (this.queryList.pageNum < Math.ceil(this.total / 10)) {
				this.queryList.pageNum += 1;
				this.getNewList();
			}
		} else {
			console.log(this.queryList.pageNum);
			if (this.queryList.pageNum < Math.ceil(this.total / 10)) {
				this.queryList.pageNum += 1;
				this.namegetNewList();
			}
		}
	},
	methods: {
		handleFilter() {
			this.newsList = [];
			this.getNewList();
		},
		getNewList() {
			let that = this;
			this.$apiCall.request(
				'post',
				`/news/list?newsname=${that.queryList.newsname}&pageNum=${that.queryList.pageNum}&pageSize=${that.queryList.pageSize}&queryOption=${that.queryList.queryOption}`,
				{},
				{
					sucCb(data) {
						// console.log(data.data);
						// uni.stopPullDownRefresh();
						that.total = data.total;
						// that.newsList = data.data;
						// if(that.queryList.pageNum <= Math.ceil(that.total/10)){
						// that.queryList.pageNum += 1
						that.newsList = that.newsList.concat(data.data);

						// }
					}
				}
			);
		},
		namegetNewList() {
			let that = this;
			this.$apiCall.request(
				'post',
				`/news/list?pageNum=${that.queryList.pageNum}&pageSize=${that.queryList.pageSize}&queryOption=${that.queryList.queryOption}`,
				{},
				{
					sucCb(data) {
						// console.log(data.data);
						that.total = data.total;
						// that.newsList = data.data;
						// if(that.queryList.pageNum <= Math.ceil(that.total/10)){
						// that.queryList.pageNum += 1
						that.newsList = that.newsList.concat(data.data);

						// }
					}
				}
			);
		},

		setContent(value) {
			value = value.replace(/<\/?.+?\/?>/g, '');
			if (!value) return '';
			if (value.length > 50) {
				return value.slice(0, 50) + '...';
			}
			return value;
		},
		goToNewDetailView(id) {
			uni.navigateTo({
				url: `/pages/news/detail?id=${id}`
			});
		},
		onSelected(res) {
			this.queryList.newsname = '';
			console.log(res, 111);
			let that = this;
			this.$apiCall.request(
				'post',
				`/news/list?zixunleixing=${res[0][0].zixunleixing}&pageNum=${that.queryList.pageNum}&pageSize=${that.queryList.pageSize}&queryOption=${that.queryList.queryOption}`,
				{},
				{
					sucCb(data) {
						that.total = data.total;
						that.newsList = data.data;
						// that.newsList =that.newsList.concat( data.data);
					}
				}
			);
		}
	}
};
</script>

<style lang="scss">
.list-title {
	font-size: 15px;
	font-weight: 600;
	color: #000000;
	letter-spacing: 1px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.list-content {
	height: 28px;
	font-size: 13px;
	font-weight: 400;
	color: #000000;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-top: 10px;
}
.redianxinxi {
	align-self: center;
	padding: 10px 1.9%;
	margin: 5px auto;
	color: #aa557f;
	font-size: 12px;
	font-weight: 400;
	border-radius: 10px;
	width: 20%;
	text-align: center;
}
.activegay {
	background: rgb(186, 190, 195);
	color: white;
}
.active {
	background: #fe7743;
	color: #fff;
}
</style>
